<template>
	<view class="container">

		<view class="user-section">
			<view class="user-info-box">
			</view>
		</view>
		<view class="info-box">
			<view class="info-item">
				<view class="title-box">
					<view class="title-icon">
						<text class="yticon icon-shouye" style="font-size: 50upx;"></text>
					</view>
					<view class="title-text">
						<view>
							报警信息
						</view>
						<view class="title_tag" v-if="alarmInfo.state == '11'">
							未处理
						</view>
						<view class="title_tag" v-if="alarmInfo.state == '22'">
							处理完成
						</view>
						<view class="title_tag" v-if="alarmInfo.state == '33'">
							拒绝处理
						</view>
					</view>
				</view>
				<view class="list-cell">
					<view class="list-cell-item">
						<view class="item-title">报警人：</view>
						<view class="item-info">{{alarmInfo.contactsName || "无"}}</view>
					</view>
					<view class="list-cell-item">
						<view class="item-title">所属小区：</view>
						<view class="item-info">{{alarmInfo.communityName || "无"}}</view>
					</view>
					<view class="list-cell-item">
						<view class="item-title">联系方式：</view>
						<view class="item-info">{{alarmInfo.contactsPhone || "无"}}</view>
					</view>
					<view class="list-cell-item">
						<view class="item-title">报警类型：</view>
						<view class="item-info">{{alarmInfo.tagName || "无"}}</view>
					</view>
					<view class="list-cell-item">
						<view class="item-title">发生地点：</view>
						<view class="item-info">{{alarmInfo.place || "无"}}</view>
					</view>
					<view class="list-cell-item">
						<view class="item-title">报警时间：</view>
						<view class="item-info">{{alarmInfo.inputTime || "无"}}</view>
					</view>
					<view class="list-cell-item">
						<view class="item-title">详情描述：</view>
						<view class="item-info">{{alarmInfo.content || "无"}}</view>
					</view>
					<view class="list-cell-item">
						<view class="item-title">图片：</view>
						<view class="item-info">
							<image v-for="(item,index) in alarmInfo.imgList" :src="item.url" style="width:140upx;height: 140upx;" @click="previewImg(index)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				alarmId:"",
				alarmInfo:{

				}
			}
		},
		onLoad(option) {
            if(option){
				this.alarmId = option.alarmId
			}
			this.getAlarmById()
		},

		methods: {
			getAlarmById(){
				let params = {
					eventId:this.alarmId
				}
				this.$api.request.queryEnventById(params,(res)=>{
					if(res.body.status.statusCode == "0"){
						this.alarmInfo = res.body.data.eventEntity
					}
				})
			},
			previewImg(index) {
				let imgsArray = [];
				for(let i = 0;i<this.alarmInfo.imgList.length;i++){
					imgsArray.push(this.alarmInfo.imgList[i].url)
				}
				uni.previewImage({
					current: index,
					urls: imgsArray
				});
			},
		}
	}
</script>
<style lang='scss'>
	page {
		background: $page-color-base;
	}

	.user-section {
		width: 100%;
		height: 300upx;
		position: relative;
		background: linear-gradient(#00b3fa,#E7EFFF);
		overflow: hidden;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}
	}

	.user-info-box {
		margin-top: 40upx;
		padding-left: 40upx;
		height: 120upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		z-index: 1;
	}

	.info-box {
		width: 100%;
		position: absolute;
		top: 100upx;
	}

	.title-box {
		display: flex;
		flex-direction: row;
	}

	.title-icon {
		width: 100upx;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
	}

	.title-text {
		width: calc(100% - 100upx);
		height: 100upx;
		line-height: 100upx;
		border-bottom: 1px dotted #e7ecf5;
		font-size: 32upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.info-item {
		width: calc(100% - 40upx);
		margin: 20upx;
		background-color: white;
		border-radius: 20upx;
		overflow: hidden;
	}


	.list-cell {
		padding: 20upx;

		.list-cell-item {
			padding:30upx 0;
			display: flex;
			flex-direction: row;
			font-size: 30upx;
			justify-content: space-between;

			.item-title {
				width: 200upx;
				font-weight: border;
				color: #787684;
				margin-left: 20upx;
			}

			.item-info {
				width:calc(100% - 220upx);
				margin-right: 20upx;
				text-align: right;
			}
		}
	}
	
	
	.title_tag {
		border-radius: 10upx;
		margin-top: 25upx;
		margin-right: 30upx;
		height: 50upx;
		line-height: 50upx;
		border: 1upx solid #1DA3EE;
		color: #1DA3EE;
		padding:0 20upx;
		font-size: 22upx;
		text-align: center;
	}
</style>
